<template>
  <main>
    <div class="use-btn">
      <el-button @click="logout()">返回</el-button>
    </div>
    远程视频：
    <div id="remoteStream"></div>
    本地视频：
    <div id="localStream"></div>
    <img id="img" style="display:none" src="@/assets/background.jpeg" alt="">
  </main>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue'
import { getToken, removeToken } from '@/utils/auth'
import { getCurrentInstance } from 'vue'
import RTCBeautyPlugin from 'rtc-beauty-plugin'
const beautyPlugin = new RTCBeautyPlugin()
beautyPlugin.setBeautyParam({ beauty: 0.5, brightness: 0.5, ruddy: 0.5 })
const proxy = getCurrentInstance()?.proxy
const $router = proxy?.$router
const $route = proxy?.$route
const $Trtc = proxy?.$Trtc
let client: { join: (arg0: { roomId: number; }) => any; publish: (arg0: any) => any; on: (arg0: string, arg1: { (event: any): void; (event: any): void; }) => void; subscribe: (arg0: any) => void; leave: () => any; destroy: () => void; }
let localStream: { initialize: () => any; play: (arg0: string) => void; close: () => void; }
const userList = [
  {
    userId: 'zxz0',
    nikeName: '用户0',
    userSig: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwlUVVTDx4pTsxIKCzBQlK0MTAwNzcyNzYyOITGpFQWZRKlDc1NTUyMDAACJakpkLEjMzszQ3MDWzsISakpkONLasUjvIKTCrzM3MP9iyoMQi3c3S3dHEO8DD27hMO8gzRt8tMaIsscQlRj-Zr9hWqRYAOaIxCA__'
  },
  {
    userId: 'zxz1',
    nikeName: '用户1',
    userSig: 'eJwtzMEKgkAUheF3mXXIdZyZi0ILoUWLCMyKWkpO40WUySwuRu*eqcvzHfg-4rjLg7ftRCJkAGI1bSpt29OdJh54CBd-lnXhPZUiCRUAosRIzo9lT50dXWstAWDWnpq-GRMjaARcKuTG7B6KaMN16m5cXQ8mpUvcqEyd8lfGreZtczYPrtLBW7cW3x-o4DGX'
  },
  {
    userId: 'zxz2',
    nikeName: '用户2',
    userSig: 'eJwtzFELgjAYheH-suuQr9WcE7oQglqMgoryNthWn1kOtZhG-z1TL89z4P2QozoEb1OSmNAAyKTfqM2zRos9t76lo1f6fnEONYmncwDOKZ-R4THeYWk6Z4xRABi0xsffwlBwYJyKsYLXLntOEp0JVTXFepXvN9Kj2KZZ414yL20aRTuJJ2X9DZbFgnx-*UIxvA__'
  }
]
async function startStrem() {
  try {
    await client.join({ roomId: 8888 })
    await localStream.initialize()
    await beautyPlugin.loadResources()
    const stream = await beautyPlugin.generateStream({ 
      localStream: localStream,	  
      type: 'virtual',
      img: document.getElementById('img')
    })
    stream.play('localStream')
    await client.publish(stream)
  } catch (error) {
    console.error('失败' + error)
  }
}
function logout() {
  destroy()
  $router?.push('/login')
} 
onMounted(() => {
  const index = Number($route?.query.index) || 0
  const { userId, userSig } = userList[index]
  client = $Trtc.createClient({
    mode: 'rtc',
    sdkAppId: 1400772732,
    userId,
    userSig
  })
  client.on('stream-added', (event: any) => {
    const remoteStream = event.stream
    //订阅远端流
    client.subscribe(remoteStream)
  })
  client.on('stream-subscribed', (event: any) => {
    // 远端流订阅成功
    const remoteStream = event.stream
    remoteStream.play('remoteStream')
  })
  localStream = $Trtc.createStream({ userId, audio: true, video: true })
  startStrem()
})
async function destroy() {
  try {
  // 停止本地流预览
  localStream.close()
  await client.leave()
  // 退房成功，如果没有调用 client.destroy()，可再次调用 client.join 重新进房开启新的通话
  // 调用 destroy() 结束当前 client 的生命周期
  client.destroy()
  console.log('销毁成功!')
  } catch (error) {
    
  }
}
onUnmounted(() => {
  destroy()
})
</script>
<style lang="css">
.use-btn{
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}
</style>
